<template>
    <div id="groupBack">
        <div style="padding: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="searchData.groupname"></el-input>
<!--            <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索</el-button>-->
<!--            <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>-->
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item style="margin-top: 33px">
                    <button class="icon-btn add-btn" @click="handleAdd">
                        <div class="add-icon"></div>
                        <div class="btn-txt">新增群组</div>
                    </button>
                </el-form-item>
                <el-form-item >
                    <el-popconfirm
                            class="ml-5"
                            title="您确定删除吗？"
                            @confirm="delBatch"
                    >
                        <button class="noselect" slot="reference">
                            <span class="text" >批量删除</span>
                            <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
                        </button>
                        <!--        <el-button style="background-color:#4198b9;color: #FFFFFF" slot="reference">批量删除<i class="el-icon-remove-outline"></i> </el-button>-->
                    </el-popconfirm>
                </el-form-item>
            </el-form>
<!--            <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i> </el-button>-->
<!--            <el-popconfirm-->
<!--                    class="ml-5"-->
<!--                    title="您确定删除吗？"-->
<!--                    @confirm="delBatch"-->
<!--            >-->
<!--                <el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i> </el-button>-->
<!--            </el-popconfirm>-->
        </div>
        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号" width="70">
            </el-table-column>
            <el-table-column prop="groupname" label="群组名" width="140">
            </el-table-column>
            <el-table-column prop="groupnum" label="总人数" width="140">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
<!--                    <el-button type="primary" @click="handleQuery(scope.row)">查询<i class="el-icon-more-outline"></i> </el-button>-->
<!--                    <el-button type="success" @click="handleEdit(scope.row)" style="margin-left: 5px">编辑<i class="el-icon-edit"></i> </el-button>-->
                    <button class="query" @click="handleQuery(scope.row)" style="margin-top: 5px">
                        <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                        </svg>查询</button>
                    <button class="edit" @click="handleEdit(scope.row)" style="margin-top: 5px">
                        <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                        </svg>编辑</button>
                    <el-popconfirm
                            width="200"
                            class="ml-5"
                            title="您确定删除吗？"
                            confirm-button-type="primary"
                            @confirm="handleDel(scope.row.id)"
                    >
                        <button class="noselect"  style="border-radius: 50px;" slot="reference">
                            <span class="text" style="font-size: 13px;font-weight: normal;">删  除</span>
                            <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
                        </button>
                    </el-popconfirm>
<!--                    <el-popconfirm-->
<!--                            class="ml-5"-->
<!--                            title="您确定删除吗？"-->
<!--                            @confirm="handleDel(scope.row.id)"-->
<!--                    >-->
<!--                        <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
<!--                    </el-popconfirm>-->
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加答者" :visible.sync="dialogFormVisible" width="30%">
            <el-form>
                <el-form-item label="账号" label-width="80px">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="80px">
                    <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加群组" :visible.sync="dialogFormVisible1" width="30%">
            <el-form>
                <el-form-item label="群组名" label-width="80px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel1">取 消</el-button>
                <el-button type="primary" @click="save1">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改群组" :visible.sync="dialogFormVisible2" width="30%">
            <el-form>
                <el-form-item label="群组名"label-width="80px">
                    <el-input v-model="form.name"  placeholder="请输入新群组名" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel2">取 消</el-button>
                <el-button type="primary" @click="save2">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="答者信息" :visible.sync="RespondentdialogFormVisible" width="30%">
            <el-table :data="tableDataRespondent" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">
<!--                <el-table-column type="selection" width="55">-->
<!--                </el-table-column>-->
                <el-table-column prop="account" label="账号">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="Respondentsave1">添加答者</el-button>
                <el-button @click="Respondentcancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "GroupManage",
        data(){
            return{
                tableData: [{
                    id:1,
                    groupname:'开心小队',
                    groupnum:2,
                },{
                    id:2,
                    groupname:'不开心小队',
                    groupnum:2
                },{
                    id:3,
                    groupname:'快乐小队',
                    groupnum:2
                }],
                tableDataRespondent:[{
                    account: 'kk',
                    phone:13566889999
                },{
                    account: 'uu',
                    phone:18933557428
                },],
                total:3,
                searchData:{},
                account:"",
                pageNum:1,
                pageSize:5,
                dialogFormVisible:false,
                dialogFormVisible1:false,
                dialogFormVisible2:false,
                RespondentdialogFormVisible:false,
                form:{},
                multipleSelection:[],
                headerBg: 'headerBg'
            }
        },
        created() {
            this.load()
        },
        methods:{
            load(){
                // this.request.get("http://localhost:9090/group/page",{
                //     params:{
                //         pageNum: this.pageNum,
                //         pageSize:this.pageSize,
                //         id:this.searchData.id
                //     }
                // }).then(res =>{
                //     this.tableData=res.records
                //     this.total=res.total
                // })
            },
            // save(){
            //     if(this.form.id==null){
            //         this.form.type = "respondent"
            //         this.form.state = 1
            //     }
                // this.request.post("http://localhost:9090/group/save",this.form).then(res =>{
                //     if(res){
                //         this.dialogFormVisible=false;
                //         this.pageNum=Math.floor(this.total/this.pageSize+1)
                //         this.reset()
                //         this.$message.success("保存成功")
                //     } else{
                //         this.$message.error("保存失败")
                //     }
                // })
            // },
            // save1(){
            // },
            // save2(){
            // },
            handleAdd(){
                this.form={}
                this.dialogFormVisible1=true;
            },
            handleEdit(row){
                this.form=row
                this.dialogFormVisible2=true;
            },
            handleQuery(row){
                this.form=row
                this.RespondentdialogFormVisible=true;
            },
            Respondentsave1(){
                this.dialogFormVisible=true;
            },
            handleDel(id){
                // this.request.delete("http://localhost:9090/group/"+id).then(res =>{
                //     if(res){
                //         this.dialogFormVisible=false;
                //         this.reset()
                //         this.$message.success("删除成功")
                //     } else{
                //         this.$message.error("删除失败")
                //     }
                // })
            },
            delBatch(){
                let ids = this.multipleSelection.map(v=> v.id)
                // this.request.post("http://localhost:9090/group/del/batch",ids).then(res =>{
                //     if(res){
                //         this.dialogFormVisible=false;
                //         this.reset()
                //         this.$message.success("删除成功")
                //     } else{
                //         this.$message.error("删除失败")
                //     }
                // })
            },
            reset(){
                this.searchData= {}
                this.load()
            },
            cancel(){
                this.dialogFormVisible=false
                this.load()
            },
            cancel1(){
                this.dialogFormVisible1=false
                this.load()
            },
            cancel2(){
                this.dialogFormVisible2=false
                this.load()
            },
            Respondentcancel(){
                this.RespondentdialogFormVisible=false
                this.load()
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.load()
            },
            handleSelectionChange(val){
                this.multipleSelection=val
            }
        }
    }
</script>

<style scoped>
    button.noselect {
        position: relative;
        width: 150px;
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        background: red;
        border: none;
        border-radius: 10px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
        background: #e62222;
    }

    button.noselect, button span {
        transition: 200ms;
    }

    button.noselect .text {
        transform: translateX(40px);
        color: white;
        font-weight: bold;
        font-size:16px;
    }

    button.noselect .icon {
        position: absolute;
        border-left: 1px solid #c41b1b;
        transform: translateX(110px);
        height: 30px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    button.noselect svg {
        width: 15px;
        fill: #eee;
    }

    button.noselect:hover {
        background: #ff3636;
    }

    button.noselect:hover .text {
        color: transparent;
    }

    button:hover .icon {
        width: 150px;
        border-left: none;
        transform: translateX(0);
    }

    button:focus {
        outline: none;
    }

    button:active .icon svg {
        transform: scale(0.8);
    }
    .icon-btn {
        width: 40px;
        height: 40px;
        border: 1px solid #cdcdcd;
        background: white;
        border-radius: 25px;
        overflow: hidden;
        position: relative;
        transition: width 0.2s ease-in-out;
        font-weight: 500;
        font-family: inherit;
    }

    .add-btn:hover {
        width: 120px;
        margin-top:7px
    }
    .add-btn::before,
    .add-btn::after {
        transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
        content: "";
        position: absolute;
        height: 4px;
        width: 10px;
        top: calc(50% - 2px);
        background: seagreen;
    }

    .add-btn::after {
        right: 9px;
        overflow: hidden;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    .add-btn::before {
        left: 9px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    .icon-btn:focus {
        outline: none;
    }

    .btn-txt {
        opacity: 0;
        transition: opacity 0.2s;
        font-weight: bold;
        font-size:16px;
    }

    .add-btn:hover::before,
    .add-btn:hover::after {
        width: 4px;
        border-radius: 2px;
    }

    .add-btn:hover .btn-txt {
        opacity: 1;
    }

    .add-icon::after,
    .add-icon::before {
        transition: all 0.2s ease-in-out;
        content: "";
        position: absolute;
        height: 20px;
        width: 2px;
        top: calc(50% - 10px);
        background: seagreen;
        overflow: hidden;
    }

    .add-icon::before {
        left:17px;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    .add-icon::after {
        right: 17px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    .add-btn:hover .add-icon::before {
        left: 10px;
        height: 4px;
        top: calc(50% - 2px);
    }

    .add-btn:hover .add-icon::after {
        right: 10px;
        height: 4px;
        top: calc(50% - 2px);
    }

    button.edit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-image: linear-gradient(to top, #30cfd0 0%, #42b983 100%);
        border: solid 3px transparent;
        background-clip: padding-box;
        box-shadow: 0px 0px 0px 3px #ffffff00;
        color: white;
        min-height: 43px;
        padding: 0 13px 0 13px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all .5s ease;
        width:150px;
    }

    button.edit:active {
        transform: scale(.9);
        transition: all 100ms ease;
    }

    button.edit:hover {
        box-shadow: 0px 0px 0px 3px #42b999;
    }

    button.edit svg {
        width: 16px;
    }

    button.query {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-image: linear-gradient(to top, #99bcdd 0%, #4198b9 100%);
        border: solid 3px transparent;
        background-clip: padding-box;
        box-shadow: 0px 0px 0px 3px #ffffff00;
        color: white;
        min-height: 43px;
        padding: 0 13px 0 13px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all .5s ease;
        width:150px
    }

    button.query:active {
        transform: scale(.9);
        transition: all 100ms ease;
    }

    button.query:hover {
        box-shadow: 0px 0px 0px 3px #4bb3c0;
    }

    button.query svg {
        width: 16px;
    }

</style>